
class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            name: '',
            id: 0,
            state: "ALL",
            start: 0,
            pagesize: 15,
            counts: [],
            keyword: '',
            ex_num: '',
            ex_name: '',
        };
    }

    formatlist(list) {
        var listitem = [], wulist = []//,{postage}=this.state;
        if (list.length > 0) {
            list.forEach((x, i) => {
                //         console.log(list,list)
                // addressarr=JSON.parse(x.address);

                let bookhtml = [];// addressinfoarr=x.apply.addressinfo==null?"":JSON.parse(decodeurl(x.apply.addressinfo)),
                if (x.books.length > 0) {
                    x.books.forEach(y => {
                        let src = ''
                        if (y.goodsimg.indexOf('http') == -1) {
                            src = `${API_HEAD}imgs/` + y.goodsimg
                        } else {
                            src = y.goodsimg
                        }
                        bookhtml.push(
                            <div>
                                <p>
                                    <img src={src} />
                                    <span>{y.goodsname}</span>
                                </p>
                                <p>x<span>1</span></p>
                            </div>
                        )
                    })
                }
                listitem.push(
                    <div className="orderitem">
                        <div className="orderheader">
                            <div>
                                <p>{getstatecontent(x.apply.state)}</p>
                                <p style={{ display: x.apply.payDate == "0001-01-01T00:00:00" ? "none" : "" }}>付款时间：{formatDate(new Date(x.apply.payDate))}</p>
                                <p>订单号：{x.apply.ordernum}</p>
                                {/* <p>付款人：{x.name}</p> */}
                                <p>实付金额：{(x.apply.cost / 100).toFixed(2)}</p>
                            </div>
                            <div className='orderheaderright'>
                                <div style={{ display: x.apply.state != "NO_PAY" && x.apply.state != "PAY_SUCCESS" && x.apply.state != "CANCELED" ? "" : "none" }} data-toggle="modal" data-target="#modalTwo"
                                    className='couriernum' onClick={this.modifygoods.bind(this, x.apply.ordernum, 1)}>寄送单号修改</div>
                                <div style={{ display: x.apply.state == "SOLVING" || x.apply.state == "SOLVED" ? "" : "none" }} data-toggle="modal" data-target="#modalTwo" className='couriernum'
                                    onClick={this.modifygoods.bind(this, x.apply.ordernum, 2)}>寄回单号修改</div>
                                <p className="todetails" onClick={this.todetails.bind(this, x.apply.ordernum)}>订单详情</p>
                            </div>
                        </div>
                        <div className="ordercontent">
                            <div>
                                <p className="name">收货人：{x.apply.borrow_username}</p>
                                <p>电话：{x.apply.phone}</p>
                                <p>地址：{x.apply.addressinfo}</p>
                                <p className="red" style={{ display: x.apply.describe ? "" : "none" }}>留言：{x.apply.describe}</p>
                            </div>
                            <div>
                                {bookhtml}
                            </div>
                            <div>
                                {/* <p>￥ <span>{(x.cost/100).toFixed(2)}</span></p> */}
                                <p>应付金额：￥ <span>{(x.apply.total / 100).toFixed(2)}</span></p>
                                <p>押金：￥ <span>{(x.apply.deposit / 100).toFixed(2)}</span></p>
                                <p>实付金额：￥ <span>{(x.apply.cost / 100).toFixed(2)}</span></p>
                                {/* <p>派送费：￥ <span>{(postage/100).toFixed(2)}</span></p> */}
                                {/* <p>优惠券：-￥ <span>{((goodsinfoarr.data[0].promotionprice/100).toFixed(2)*goodsinfoarr.data[0].goodscount)-(x.price/100).toFixed(2)}</span></p> */}
                            </div>
                        </div>
                        <div className="orderfooter" style={{ display: x.apply.state == "NO_PAY" ? "none" : "" }}>
                            <div className="orderfooterleft">
                                <div style={{ display: x.apply.pickupDate ? "" : "none" }}>预约还书时间：{x.apply.pickupDate}  {x.apply.pickupDatetime}</div>
                            </div>
                            <div className="orderfooterright">
                                {/* <p>备注</p> */}
                                <p style={{ display: x.apply.state == "SOLVING" ? "" : "none" }} onClick={this.refund.bind(this, x.apply.ordernum)}>退押金</p>
                                {/* <p>打印小票</p> */}
                                <p style={{ display: x.apply.state == "PAY_SUCCESS" || x.apply.state == "RECEIVED" ? "" : "none" }} data-toggle="modal" data-target="#modalOne"
                                    onClick={this.sendgoods.bind(this, x.apply.ordernum, x.apply.state, x.apply.userid)} className="fahuo">自送发货</p>
                            </div>
                        </div>
                    </div>

                    // <tr key={i}>
                    //     <td>{x.ordernum}</td> 
                    //     <td>{formatDate1(new Date(x.createDate))}</td> 
                    //     <td>{formatDate1(new Date(x.paytime))}</td> 
                    //     <td className="tconter">{getstatecontent(x.state)}</td> 
                    //     <td className="operatebox">
                    //         <div className='operate' id={"ope"+x.id}>
                    //             <div>
                    //                 <img src="./src/todetails.png"/>
                    //                 <p className="edit" onClick={this.todetails.bind(this, x.id)}>详情</p>
                    //             </div>
                    //             <div>
                    //                 <img src="./src/del.png"/>
                    //                 <p className='edit colred' onClick={this.del.bind(this,x.id)}>删除</p>
                    //             </div>                
                    //         </div>
                    //      </td>
                    // </tr>
                )
            });
        }
        else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list, wulist })
        // this.setState({listitem})
    }
    // // 编辑
    // todetail(e){
    //     var {list,name} = this.state;
    //         list.forEach(x=>{
    //             if(x.id == e) {
    //                 name=x.name
    //             }
    //         });
    //         this.setState({
    //             id:e,
    //             name
    //         })
    // }
    // 详情
    todetails(e) {
        window.location.href = "./orderdetail.html?ordernum=" + e;
    }
    //    查询
    searchinput(e) {
        this.setState({ keyword: e.target.value })
    }
    search() {
        if (this.state.keyword.length == 0) return;
        let { keyword, start, pagesize, state } = this.state, that = this;
        //     Ordersgetlistbystate({start,pagesize,state,keyword}, res => {
        //         if (res.issuccess == 1) {
        that.freshlist(start, state)
        //     }
        // })
    }
    reset() {
        let { state } = this.state
        this.setState({ keyword: '' }, () => {
            this.freshlist(0, state);
        });

    }
    // 删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid } = this.state
        //    Goodstypedeltype(delid,res=>{
        //     if(res.issuccess==1){
        //         alert('删除成功')
        //         $('#myModal').modal('toggle');
        //         this.freshlist()
        //     }else{
        //         $('#myModal').modal('toggle');
        //         alert(res.msg);
        //     }
        // })
    }

    submit() {
        var { ex_num, ex_name, ordernum, start, state, orderstate, userid } = this.state, that = this, err = '';
        if (ex_name == "") err = "请输入快递公司名称"
        if (ex_num == "") err = "请输入运单号"
        if (err.length > 0) {
            alert(err);
            return
        }
        var data = { ex_num, ex_name, ordernumber: ordernum, userid }
        // if (this.state.id > 0) data['id'] = this.state.id;
        if (orderstate == "PAY_SUCCESS") {
            setexpress(data, res => {
                if (res.issuccess == 1) {
                    // that.setState({id:0})
                    alert('保存成功');
                    that.freshlist(start, state)
                }
            })
        } else {
            setbackexpress(data, res => {
                if (res.issuccess == 1) {
                    // that.setState({id:0})
                    alert('保存成功');
                    that.freshlist(start, state)
                }
            })
        }

    }
    //修改运单号
    modify() {
        let { ordernum, modifytype, ex_num, ex_name, start, state } = this.state, err = ''
        if (ex_name == "") err = "请输入快递公司名称"
        if (ex_num == "") err = "请输入运单号"
        if (err.length > 0) {
            alert(err);
            return
        }
        var data = { ex_num, ex_name, ordernumber: ordernum }
        if (modifytype == 1) {//寄送单号修改
            setsendnum(data, res => {
                if (res.issuccess == 1) {
                    alert('保存成功');
                    that.freshlist(start, state)
                }
            })
        } else {
            setsendbacknum(data, res => {
                if (res.issuccess == 1) {
                    alert('保存成功');
                    that.freshlist(start, state)
                }
            })
        }
    }
    componentDidMount() {
        let { state } = this.state;

        // basegetSettings(res=>{
        //     if(res.issuccess==1){
        //         let postage=res.data.PostFee
        //         this.setState({postage},()=>{
        this.freshlist(0, state)
        //         })
        //     }
        // }) 

    }
    freshlist(start, state) {
        let { pagesize, keyword } = this.state;
        getorderslist({ start, pagesize, state, keyword }, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })
        setalllist(res=>{
            
        })
    }
    // refund(e){
    //     let that =this;
    //     setrefund(e,res=>{
    //         if(res.issuccess==1){
    //             alert(res.data)
    //             that.freshlist(0,that.state.state)
    //         }
    //     })
    // }
    // 退押金
    refund(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start, state } = this.state
        setrefund(delid, res => {
            if (res.issuccess == 1) {
                alert(res.data)
                that.freshlist(start, state)
            }
        })
    }
    sendgoods(e, state, userid) {
        this.setState({ ordernum: e, orderstate: state, userid })
        // sendgoods(e,res=>{
        //     if(res.issuccess==1){
        //         alert('发货成功！')
        //         that.freshlist(0,that.state.state)
        //     }
        // })
    }
    modifygoods(e, i) {
        let { list } = this.state, that = this
        list.forEach(x => {
            if (x.apply.ordernum == e) {
                if (i == 1) {
                    that.setState({ ex_num: x.apply.express_num, ex_name: x.apply.express_name })
                } else {
                    that.setState({ ex_num: x.apply.backexpress_num, ex_name: x.apply.backexpress_name })
                }
                that.setState({ ordernum: e, modifytype: i })
            }
        })
        this.setState({})
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize, state } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start, state)
        })
    }
    setpage(e) {
        let { pagesize, state, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start, state)
        })
    }
    tabstate(e) {
        let that = this, { start, state, keyword } = that.state
        state = e
        start = 0
        console.log(e, 'e.target.value')
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ state, start }, () => {
            that.freshlist(start, state, keyword)
        })
    }
    inputchange(prop, e) {
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }
    add() {
        $('#modalOne').modal('toggle');
    }
    render() {
        let { listitem, wulist, counts, pagestart, keyword, ex_num, ex_name } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要退押金吗？' click={this.confirmdel.bind(this)} />
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">填写</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">运单号</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'ex_num')} value={ex_num} type="text" placeholder='请输入运单号' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">公司名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'ex_name')} value={ex_name} type="text" placeholder='请输入快递公司名称' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div className="modal fade" id="modalTwo" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">填写</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">运单号</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'ex_num')} value={ex_num} type="text" placeholder='请输入运单号' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">公司名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'ex_name')} value={ex_name} type="text" placeholder='请输入快递公司名称' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.modify.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>

                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            当前位置 > 借书订单
                        </div>
                    </div>
                    <div className="content">
                        <div className="tabletit">
                            <div className="search">
                                <input onChange={this.searchinput.bind(this)} value={keyword} type="text" placeholder='请输入订单号' className />
                                <p onClick={this.search.bind(this)}>查询</p>
                                <p onClick={this.reset.bind(this)}>返回</p>
                            </div>
                            {/* <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p> */}
                        </div>
                        <div className="tabbox">
                            <p className={this.state.state == "ALL" ? "click" : ''} onClick={this.tabstate.bind(this, "ALL")}>全部</p>
                            <p className={this.state.state == "NO_PAY" ? "click" : ''} onClick={this.tabstate.bind(this, "NO_PAY")}>未支付</p>
                            <p className={this.state.state == "PAY_SUCCESS" ? "click" : ''} onClick={this.tabstate.bind(this, "PAY_SUCCESS")}>待发货</p>
                            <p className={this.state.state == "CANCELED" ? "click" : ''} onClick={this.tabstate.bind(this, "CANCELED")}>已取消</p>
                            <p className={this.state.state == "SHIPPED" ? "click" : ''} onClick={this.tabstate.bind(this, "SHIPPED")}>待收货</p>
                            <p className={this.state.state == "RECEIVED" ? "click" : ''} onClick={this.tabstate.bind(this, "RECEIVED")}>待还书</p>
                            {/* <p className={this.state.state=="SHOPSHIPPED"?"click":''} onClick={this.tabstate.bind(this,"SHOPSHIPPED")}>店家待收货</p> */}
                            <p className={this.state.state == "SOLVING" ? "click" : ''} onClick={this.tabstate.bind(this, "SOLVING")}>待退押金</p>
                            <p className={this.state.state == "SOLVED" ? "click" : ''} onClick={this.tabstate.bind(this, "SOLVED")}>已完成</p>
                        </div>
                        {listitem}
                        {/* <table className="tab">
                            <thead>
                            <tr>
                            <th>订单编号</th>
                            <th>订单创建时间</th>
                            <th>支付金额</th>
                            <th className="tconter">订单状态</th>
                            <th className="cz tconter">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {listitem}
                            </tbody>
                        </table> */}
                        {wulist}
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='order' height="order" />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)